<template>
    <textarea :id="id" :value="value"></textarea>
</template>

<script>
    // Import TinyMCE
    import tinymce from "../../static/js/tinymce/tinymce";
    import "../../static/js/tinymce/themes/modern/theme";
    import "../../static/js/tinymce/plugins/paste";
    import "../../static/js/tinymce/plugins/link";
    import "../../static/js/tinymce/langs/zh_CN";
    const INIT = 0;
    const CHANGED = 2;
    var EDITOR = null;
    export default {
        props: {
            value: {
                type: String,
                required: true
            },
            setting: {}
        },
        watch: {
            value: function(val) {
                console.log("init " + val);
                if (this.status == INIT || tinymce.activeEditor.getContent() != val) {
                    tinymce.activeEditor.setContent(val);
                }
                this.status = CHANGED;
            }
        },
        data: function() {
            return {
                status: INIT,
                id: "editor-" + new Date().getMilliseconds()
            };
        },
        methods: {},
        mounted: function() {
            const _this = this;
            const setting = {
                selector: "#" + _this.id,
                language: "zh_CN",
                // toolbar:'bullist',
                init_instance_callback: function(editor) {
                    EDITOR = editor;
                    console.log("Editor: " + editor.id + " is now initialized.");
                    editor.on("input change undo redo", () => {
                        var content = editor.getContent();
                        _this.$emit("input", content);
                    });
                },
                // 设置显示内容
                // plugins: ['link',"image","media", "code",'wordcount']
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor textcolor',
                    'searchreplace visualblocks code fullscreen',
                    // 'insertdatetime media table contextmenu paste code help wordcount'
                ],
                toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |image',
            };
            Object.assign(setting, _this.setting);
            tinymce.init(setting);
        },
        beforeDestroy: function() {
            tinymce.get(this.id).destroy();
        }
    };
</script>
<style>

</style>
